import RadioGroup from '@/components/RadioGroup'
import WindowLayout from '@/layout/WindowLayout'
import { observer } from 'mobx-react-lite'
import { useEffect, useRef, useState } from 'react'
import './scss/Home.scss'
import SettingSvg from '@/svg/SettingSvg'
import AddSvg from '@/svg/AddSvg'
import { Pagination } from '@heroui/react'
import AddGameModal from './view/AddGameModal'
import { gameStore } from '@/store/gameStore'
import { Game } from '@/type'
import { gameSorts } from './lib'
import { useNavigate } from 'react-router-dom'
import SettingModal from './view/SettingModal'
import EmptyGame from '@/svg/EmptyGame'
const types = [
  {
    value: 'all',
    label: '全部',
  },
  {
    value: '1',
    label: '分组1',
  },
  {
    value: '2',
    label: '分组2',
  },
]

const pageSize = 30
const Home = () => {
  const navigate = useNavigate()
  const [type, setType] = useState('all')
  const [sort, setSort] = useState('new')
  const [page, setPage] = useState(1)
  const [games, setGames] = useState<Game[]>([])

  const total = gameStore.value.games.length
  const pagetotal = Math.ceil(total / pageSize)
  const pageList = games.slice((page - 1) * pageSize, page * pageSize)

  useEffect(() => {
    setGames(
      gameSorts
        .find((item) => item.value === sort)
        .toSort(gameStore.value.games) || gameStore.value.games
    )
  }, [gameStore.value.games, sort])
  const handleTypeChange = (value: string) => {
    setType(value)
  }
  const addGameModalRef = useRef(null)
  const settingModalRef = useRef(null)
  return (
    <WindowLayout>
      <div className="Home">
        {/* 顶部内容 */}
        <div className="top-content">
          <div className="type-box">
            <div className="name">分类</div>
            <RadioGroup
              options={types}
              value={type}
              onChange={handleTypeChange}
            />
          </div>
          <div className="sort-box">
            <div className="name">排序</div>
            <RadioGroup
              options={gameSorts}
              value={sort}
              onChange={(value) => setSort(value)}
            />
          </div>
          <div className="right-buttons">
            <button
              className="btn add"
              onClick={() => {
                addGameModalRef.current.show()
              }}>
              <AddSvg />
            </button>
            <button
              className="btn setting"
              onClick={() => {
                settingModalRef.current.show()
              }}>
              <SettingSvg />
            </button>
          </div>
        </div>
        {/* 列表内容 */}
        <div className="list-content">
          <div className="list">
            <div className="list-inner">
              {pageList.map((item, index) => {
                return (
                  <div
                    key={item.id}
                    className="item"
                    style={{
                      // @ts-ignore
                      '--delay': `${index * 20}ms`,
                    }}
                    onClick={() => {
                      // GameStartManager.startGame(item)
                      navigate(`/info?id=${item.id}&sort=${sort}`)
                    }}>
                    <div className="thumb-box">
                      <img src={item.cover?.url} className="thumb" />
                    </div>
                    <div className="name">{item.name}</div>
                  </div>
                )
              })}
            </div>
          </div>
          {pagetotal > 1 && (
            <div className="pagination">
              <Pagination
                size="sm"
                page={page}
                onChange={(e) => {
                  setPage(e)
                }}
                initialPage={1}
                total={pagetotal}
              />
            </div>
          )}
          {pageList.length === 0 && (
            <div className="empty">
              <EmptyGame className="empty-icon" />
              <div className="empty-text">
                暂无游戏，
                <div
                  className="add-btn"
                  onClick={() => {
                    addGameModalRef.current.show()
                  }}>
                  点击添加游戏
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <AddGameModal ref={addGameModalRef}></AddGameModal>
      <SettingModal ref={settingModalRef} />
    </WindowLayout>
  )
}

export default observer(Home)
